<style>
    .custom-toolbar{padding: 0em 1em 1em 0em;}
    .colorBlock{
        width: 40px;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        vertical-align: middle;
        padding-left: 4px;

    }
</style>
<div class="row-fluid clearfix">
    <div class="col-md-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="#">首页</a>
            </li>
            <li class="active">
                客户信息管理
            </li>
        </ul>
    </div>
    <div class="col-md-12 column">
        <div class="col-sm-12 div-page" style="padding:1em">
            <canvas id="myChart4" width="360" height="360" class="hide"></canvas>
            <canvas id="myChart5" width="360" height="360" class="hide"></canvas>
            <canvas id="myChart6" width="360" height="360" class="hide"></canvas>

            <canvas id="myChart2" width="400" height="400"></canvas>
            <canvas id="myChart1" width="700" height="400"></canvas>
            <div style="height: 40px">
                <div class="colorBlock" style="background-color: rgba(45,168,211,0.5);margin-left: 70px"></div><span class="colorBlock" id="i1" style="width: 100px"></span>
                <div class="colorBlock" style="background-color: rgba(151,187,205,0.5);margin-left: 26px"></div><span class="colorBlock" id="i2" style="width: 100px"></span>
                <span class="colorBlock" style="width: 230px;margin-left: 290px"><span id="i3"></span>不同时间段的升级数量</span>
            </div>
            <canvas id="myChart3" width="360" height="360" class="hide"></canvas>
    </div>
    </div>
</div>

<script>
   /* var ctx1 = document.getElementById("myChart1").getContext("2d");
    var data1 = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : [65,59,90,81,56,55,40]
            },
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [28,48,40,19,96,27,100]
            }
        ]
    }
    var myNewChart1 = new Chart(ctx1).Line(data1);*/

    /*var ctx2 = document.getElementById("myChart2").getContext("2d");
    var data2 = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                data : [65,59,90,81,56,55,40]
            },
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                data : [28,48,40,19,96,27,100]
            }
        ]
    }
    var myNewChart2 = new Chart(ctx2).Bar(data2);*/

    var ctx3 = document.getElementById("myChart3").getContext("2d");
    var data3 = {
        labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : [65,59,90,81,56,55,40]
            },
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [28,48,40,19,96,27,100]
            }
        ]
    }
    var myNewChart3 = new Chart(ctx3).Radar(data3);

    var ctx4 = document.getElementById("myChart4").getContext("2d");
    var data4 = [
        {
            value : 30,
            color: "#D97041"
        },
        {
            value : 90,
            color: "#C7604C"
        },
        {
            value : 24,
            color: "#21323D"
        },
        {
            value : 58,
            color: "#9D9B7F"
        },
        {
            value : 82,
            color: "#7D4F6D"
        },
        {
            value : 8,
            color: "#584A5E"
        }
    ]
    var myNewChart4 = new Chart(ctx4).PolarArea(data4);

    var ctx5 = document.getElementById("myChart5").getContext("2d");
    var data5 = [
        {
            value: 30,
            color:"#F38630"
        },
        {
            value : 50,
            color : "#E0E4CC"
        },
        {
            value : 100,
            color : "#69D2E7"
        }
    ]
    var myNewChart5 = new Chart(ctx5).Pie(data5);

    var ctx6 = document.getElementById("myChart6").getContext("2d");
    var data6 = [
        {
            label:"已升级",
            value: 30,
            color:"green"
        },
        {
            label:"未升级",
            value : 50,
            color : "red"
        }

    ]
    var myNewChart6 = new Chart(ctx6).Doughnut(data6);
$(function(){
    $.ajax({
        url:globalUrl+'api/TMSUpdate',
        success:function(resp)
        {
            if(resp.result)
            {
                $("#i1").text(resp.data.rows[0].TermType+" : "+resp.data.rows[0].NowVersion);
                $("#i2").text(resp.data.rows[1].TermType+" : "+resp.data.rows[1].NowVersion);
                var ctx2 = document.getElementById("myChart2").getContext("2d");
                var data2 = {
                    labels : ["统计数据截止到："+GetDateStr(-1)],
                    datasets : [
                        {
                            fillColor : "rgba(45,168,211,0.5)",
                            strokeColor : "rgba(220,220,220,1)",
                            data : [resp.data.rows[0].Count]
                        },
                        {
                            fillColor : "rgba(151,187,205,0.5)",
                            strokeColor : "rgba(151,187,205,1)",
                            data : [resp.data.rows[1].Count]
                        }
                    ]
                }
                var myNewChart2 = new Chart(ctx2).Bar(data2);
            }
            else
            {
                alert(resp.msg);
            }
        }
    });
    $.ajax({
        url:globalUrl+'api/TMSUpdate?date='+GetDateStr(-1).replace("-","").replace("-",""),
        success:function(resp)
        {
            $("#i3").text(GetDateStr(-1));
            if(resp.result)
            {
                var ctx1 = document.getElementById("myChart1").getContext("2d");
                var data1 = {
                    labels : [],
                    datasets :
                    [
                        {
                            fillColor : "rgba(151,187,205,0.5)",
                            strokeColor : "rgba(151,187,205,1)",
                            pointColor : "rgba(151,187,205,1)",
                            pointStrokeColor : "#fff",
                            data : []
                        }
                    ]
                }
                var temp={};
                for(var i=0;i<resp.data.rows.length;i++)
                {
                    temp[resp.data.rows[i].Hour]=resp.data.rows[i].Num;
                }
                console.log(temp);
                for(var i=0;i<24;i++)
                {
                    var t=i;
                    if(t<10)
                    {
                        t="0"+t;
                    }
                    if(temp[t]==undefined)
                    {
                        data1.labels.push(t) ;
                        data1.datasets[0].data.push(0) ;
                        continue;
                    }
                    data1.labels.push(t) ;
                    data1.datasets[0].data.push(temp[t]) ;
                }
                var myNewChart1 = new Chart(ctx1).Line(data1);
            }
            else
            {
                alert(resp.msg);
            }
        }
    });
});
    function GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth()+1;//获取当前月份的日期
        if(m.toString().length!=2)
        {
            m="0"+m;
        }
        var d = dd.getDate();
        if(d.toString().length!=2)
        {
            d="0"+d;
        }
        return y+"-"+m+"-"+d;
    }
</script>